@import './variable.less';
@import './mixin.less';

html,
body {
  margin: 0;
  padding: 0;
  background-color: #faf8ef;
  font-family: 'Clear Sans', 'sans-serif';
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.hide {
  display: none;
}

.show {
  animation: over 2s ease 0.5s both;
}

@keyframes over {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#gameBox {
  width: @wrap_width;
  margin: 80px auto;

  @media screen and (max-width: @media_border) {
    width: @wrap_width_small;
    margin: 20px auto;
  }

  header {
    width: @menu_width;
    height: @menu_height;
    position: relative;

    @media screen and (max-width: @media_border) {
      height: 70px;
    }

    #restart {
      .button-style();
      float: left;
      display: block;
      width: 190px;
      height: 70px;
      margin-left: 7px;
      font: bold 25px 黑体;

      @media screen and (max-width: @media_border) {
        width: 90px;
        height: 40px;
        margin-top: 10px;
        margin-left: 3px;
        font-size: 16px;
      }
    }

    #score-wrap {
      float: right;
      margin-right: 8px;

      @media screen and (max-width: @media_border) {
        margin-right: 0;
      }

      .board:nth-child(2) {
        width: 155px;
        &::before {
          content: '最高分';
        }
      }
      .board:nth-child(1) {
        width: 105px;
      }

      .board {
        position: relative;
        display: inline-block;
        background-color: rgba(224, 143, 66, 0.5);
        border-radius: 10px;
        font: bold 25px 黑体;
        color: white;
        text-align: center;
        height: 30px;
        padding-top: 40px;

        @media screen and (max-width: @media_border) {
          &:nth-child(1) {
            width: 60px;
          }
          &:nth-child(2) {
            width: 80px;
          }
          height: 20px;
          padding-top: 20px;
          font-size: 16px;
          margin-top: 10px;
        }

        &::before {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          color: white;
          content: '分数';
          margin-top: 2px;

          @media screen and (max-width: @media_border) {
            font-size: 13px;
          }
        }

        .score-addition {
          position: absolute;
          color: rgba(0, 0, 0, 0.8);
          animation: fadeOut 1s ease forwards;
          right: 0;
          bottom: 2px;
        }

        @keyframes fadeOut {
          from {
          }
          to {
            transform: translateY(-30px);
            opacity: 0;
          }
        }
      }
    }
  }

  main {
    position: relative;
    width: @stage_width;
    height: @stage_width;
    background-color: @stage_bgcolor;
    border: @line_short_side solid @side_color;
    border-radius: 10px;

    @media screen and (max-width: @media_border) {
      width: @stage_width_small;
      height: @stage_width_small;
    }

    #gird {
      div {
        background-color: @side_color;
        position: absolute;
      }

      .set-line(@stage_width, @cell_width);

      @media screen and (max-width: @media_border) {
        .set-line(@stage_width_small, @cell_width_small);
      }
    }

    #stage {
      position: absolute;
      z-index: 5;
      top: -@line_short_side;
      left: -@line_short_side;
    }

    #notice {
      position: absolute;
      z-index: 10;
      top: -@line_short_side;
      left: -@line_short_side;
      width: @wrap_width;
      height: @wrap_width;
      background-color: rgba(238, 228, 218, 0.5);
      text-align: center;

      @media screen and (max-width: @media_border) {
        width: @wrap_width_small;
        height: @wrap_width_small;
      }

      p {
        text-align: center;
        margin-top: 40%;
        transform: translateY(-50%);
        font-size: 70px;
        font-weight: bold;
        color: #685849;
        margin-block-end: 0;

        @media screen and (max-width: @media_border) {
          font-size: 35px;
        }
      }

      button {
        .button-style();
        width: 30%;
        height: 10%;
        font-weight: bold;
        font-size: 20px;

        @media screen and (max-width: @media_border) {
          font-size: 13px;
        }
      }
    }
  }
}
